<template>
  <div class="song-list">
    <div class="title">
      {{ block?.uiElement?.subTitle?.title }}
    </div>
    <div class="content">
      <van-swipe class="my-swipe" :show-indicators="false">
        <van-swipe-item v-for="(creative,index) in creatives" :key="index">
          <ul class="list">
            <li v-for="resource in creative.resources" :key="resource.resourceId">
              <van-image
                width="50"
                height="50"
                :src="resource.uiElement.image.imageUrl"
              />
              <div class="right">
                <div>{{resource.uiElement.mainTitle.title}} <span class="dec">-{{resource.resourceExtInfo.artists.map(artist=>artist.name).join('/')}}</span></div>
                <div class="subTitle" :class="resource.uiElement.subTitle?.titleType">{{resource.uiElement.subTitle?.title}}</div>
              </div>
            </li>
          </ul>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent,inject } from 'vue'
import { alldatakey } from '../key'
const useSongList = (alldata:any) =>{
  const block = computed<any>(()=>{
    if(!alldata.data) return null
    return alldata.data.blocks.find((block: any) => block.blockCode === 'HOMEPAGE_BLOCK_STYLE_RCMD')
  })
  const creatives = computed<any[]>(()=>{
    if(!block.value) return []
    return block.value.creatives
  })
  return {
    block,
    creatives
  }
}


export default defineComponent({
  name: 'SongListAlign',
  setup(){
    const alldata = inject(alldatakey)
    return {
      ...useSongList(alldata)
    }
  },
})
</script>

<style lang="scss" scoped>
.song-list{
  padding: 10px;
  .title{
    font-weight: bold;
  }
  .content{
    ::v-deep(.list){
      li{
        display: flex;
        margin: 10px 0;
        .right{
          padding: 10px;
          .subTitle{
            font-size: 13px;
            color: #999;
          }
          .dec{
            font-size: 12px;
            color: #999;
          }
          .songRcmdTag{
            font-size: 12px;
            color: #E6A23C;
          }
        }
      }
    }
  }
}
</style>